<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         *{margin:0;padding:0}
     
        .header{
        width:1903px;
        height:55px;
        background-color: white;
        border:1px solid rgb(212, 209, 209);
        padding: 0;
        margin:0;
        position: relative;
        position: fixed;
        top:0;
        z-index:100;
        
        }
    /*小组名字*/
        .name a{
        text-decoration:none;
        font-size:14px;
        color:#3C3B3B;
        letter-spacing: 3px;
        font-weight: bold;
        display: block;
        text-align: center;
        margin-top: 18px;
        }
        .name{
        width:150px;
        height:55px;
        border-right:1px solid rgb(212, 209, 209);
        position: absolute;
        left:0;
        top:0;
        }
    /*顶部导航*/
        .links{
        width:1000px;
        height:55px;
        position: absolute;
        left:151px;
        }
        .links a{
        text-decoration: none;
        font-size: 14px;
        color:#646464;
        display: inline-block;
        width:85px;
        text-align: center;
        margin-top:18px;
        letter-spacing: 1px;
        }
        .links a:hover{
        color:rgb(243, 127, 82);
        cursor: pointer;
        }
        .links span{
        color:rgb(212, 209, 209);
        }
        /*设置作品合集导航*/
        .single{
         width:1903px;
         height:4130px;
         background-color: rgb(244, 244, 244);
  
         position: relative;
     
        }
        .post{
         width:1512px;
         height:2340px;
       
   
         position: absolute;
         top:135px;
         left:204px;
         
      
        }

        .sidebar{
            width:410px;
            height:2000px;
            background-color:rgb(244, 244, 244);  /*左边部分导航条*/
        }
        .logo{
            background-color:rgb(244, 244, 244);
            width:410px;
            height:275px;
            margin-top: 10px;
            border-bottom:  1px solid rgb(212, 209, 209);
        }
        .logo img{
            width:60px;
            height:60px;
            margin-top: 32px;
            margin-left: 30px;
        
        }
        .logo p{
            position: absolute;
            top:5px;
        }
        .photo-one{
            background-color:white;
            width:410px;
            height:330px;
            margin-top: 50px;
            border:  1px solid rgb(212, 209, 209);
            position: relative;
        }
        .identity,.English-name{
            font-size: 13px;
            color:#3C3B3B;
            letter-spacing: 4px;
            font-weight: bold;
        }
        .identity{
            margin-left: 170px;
            margin-top: 95px;
        }
        .English-name{
            text-decoration: none;
            margin-left: 155px;
            margin-top:-40px;
            display: block;
        }
        .logo a:hover{
         color:rgb(243, 127, 82);
         cursor: pointer;
        }
        .sentence-one,.sentence-two{
            font-size: 13px;
            color:#3C3B3B;
            letter-spacing: 4px;
        }
        .sentence-one{
            margin-left: 123px;
            margin-top:170px;
        }
        .sentence-two{
            margin-left: 123px;
            margin-top:205px;
        }

        /*设置主界面右边部分*/
        .main{
            width:1045px;
            height:2600px;
     
            margin-left: 467px;
            margin-top: -2011px;
       
            position: relative;
            background-color:rgb(244, 244, 244);
          
        }
       
        .main-top{
            width:1045px;
            height: 938px;
            background-color: white;
            border: 1px solid rgb(212, 209, 209);

        }
        .top-left{
            width:720px;
            height:278px;
        
            display: inline-block;
            border-bottom:  1px solid rgb(212, 209, 209);
            border-right: 1px solid rgb(212, 209, 209);
        }
        .top-left img{
            width:360px;
            height:180px;
           
            position: absolute;
            left:8px;
        }
        
        .top-right{
            width:326px;
            height:278px;
        
            display: inline-block;
            position: absolute;
            font-size: 14px;
            border-bottom:  1px solid rgb(212, 209, 209);
          
       
        }
        .top-right a{
            text-decoration: none;
            display: inline-block;
            width:316px;
            height:40px;
            color:#646464;
        }
        .main-content{
            width:1043px;
            height:660px;
            background-color:white;
            margin-top: -5px;
            
        }
        .info{
            width:614px;
            height:128px;
            position: absolute;
            top:125px;
            left:56px;
            font-size: 14px;
            color:#646464;
            letter-spacing: 4px;
            line-height:30px ;
        }
        .members{
            margin-top: 28px;
            margin-left: 55px;
        }

        /*设置左边部分组照*/
        .bar-photos{
            width:411px;
            height:245px;
            
        }
        .photo-one a{
            text-decoration: none;
            font-size:13px;
            color:#3C3B3B;
            font-weight: bold;
            letter-spacing: 4px;
            margin-left: 25px;
            position: absolute;
            top:265px;
        }
        .photo-one a:hover{
            cursor: pointer;
            color:rgb(243, 127, 82);
        }
        .diary a:hover{
            cursor: pointer;
            color:rgb(243, 127, 82);
        }

        .photo-one p{
            font-size: 12px;
            color:#646464;
            letter-spacing: 4px;
            margin-left: 25px;
            margin-top: 40px;
            width:250px;

        }
        .post img{
            transition: all 0.5s;
            cursor: pointer;

        }
        .post img:hover{
            transform: scale(1.02);
        
        }
        .camera{
            left: 340px;
            top: 262px;
            position: absolute;
            
        }


        /*设置日记模块*/
        .diary{
            width:410px;
            height:150px;
         
            margin-top: 30px;
            position: relative;
            border-top:1px solid rgb(212, 209, 209);
        }

        .diary img{
            width:75px;
            height:75px;
            margin-top:52.5px;
        }
        .diary-content{
            text-decoration: none;
            font-size: 13px;
            color:#3C3B3B;
            font-weight: bold;
            letter-spacing: 3px;        
            position: absolute;
            left:100px;
            top:70px;
            height:30px;
          
        }
        .diary-time{
            font-size: 12px;
            color: #646464;
            letter-spacing: 3px;
            position: absolute;
            left:100px;
            top:100px;
        }
        .thought{
            width:410px;
            height:250px;
         
            margin-top: 30px;
            position: relative;
            border-top:1px solid rgb(212, 209, 209);
        }
        .topic{
            font-size: 13px;
            color:#3C3B3B;
            font-weight: bold;
            letter-spacing: 5px;  
            position: absolute;
            top:40px;
        }
        .thought-content{
            font-size: 14px;
            color: #646464;
            letter-spacing: 3px;
            position: absolute;
            top:80px;
            line-height: 30px;

        }
        /*设置右边照片组*/
        .main-content img{
            width:931px;
            height:523px;
            margin-left: 50px;
            margin-top: 50px;
        }
        .name-one{
            text-decoration: none;
            font-size: 12px;
            color:#646464;
            display: inline-block;
            width:130px;
            margin-left:50px;
            margin-top:30px;
        }
        .name-two{
            text-decoration: none;
            font-size: 12px;
            color:#646464;
            display: inline-block;
            width:130px;
            margin-left:35px;
        }
   
        .main a:hover{
            cursor: pointer;
            color:rgb(243, 127, 82);
        }

        .member-two{
            width:1043px;
            height:660px;
            background-color:white;
            margin-top:45px;
            border: 1px solid rgb(212, 209, 209);
            
        }
        .member-two img{
            width:931px;
            height:523px;
            margin-left: 50px;
            margin-top: 50px;
            
        }


        .links-bottom{
            width:1000px;
            height:65px;
            position: absolute;
            bottom:85px;
            margin-left: 760px;
        }
        .declaration{
            width:1000px;
            height:45px;
            position: absolute;
            bottom:55px;
            margin-left: 560px;
        }
        .links-bottom a{
            text-decoration: none;
            font-size: 14px;
            color:#646464;
            display: inline-block;
            width:85px;
            letter-spacing: 1px;
            text-align: center;
        }
        .declaration p{
            font-size: 14px;
            color:#646464;
            display: inline-block;
            width:800px;
            letter-spacing: 5px;
            text-align: center;
        }
        .links-bottom a:hover{
            color:rgb(243, 127, 82);
            cursor: pointer;
        }
        .links-bottom span{
           color:rgb(212, 209, 209);
        }
    </style>
</head>
<body>
     <!--设置顶部导航-->
     <div class="header">
        <!--小组名字-->
        <div class="name">
            <a href="#">FOR YOU</a>
        </div>
        <!--顶部导航-->
        <div class="links">
            <a href="#">首页</a>
            <span>|</span>
            <a href="file:///C:/Users/ASUS/Desktop/%E6%91%84%E5%BD%B1%E7%BD%91%E7%AB%99/%E8%87%AA%E8%BF%B0/%E8%87%AA%E8%BF%B0.html">关于IW.</a>
            <span>|</span>
            <a href=" https://whaleis.gitee.io/photo">作品合集</a>
            <span>|</span>
            <a href="#">摄影笔记</a>
        </div>
    </div>
    <div class="single">
        <div class="post">
            <div class="sidebar">
                <div class="logo">
                    <img src="images/LOGO.jpg" alt="">
                    <p class="identity">摄影小白</p>
                    <a class="English-name" href="#">IWHALEIS</a>
                    <p class="sentence-one">不是为了艺术而去摄影</p>
                    <p class="sentence-two">而是因为摄影有了艺术</p>
                </div>
                <div class="photo-one">
                    <img class="bar-photos"src="images/黑夜与烟火.jpg" alt="">
                    <a href="#">组照 | 黑夜与烟火系</a>
                    <p>在异乡回味儿时的快乐</p>
                    <img class="camera"src="images/camera.jpg" alt="">
                </div>
                <div class="photo-one">
                    <img class="bar-photos"src="images/晨式风格.jpg" alt="">
                    <a href="#">组照 | 晨式风格系</a>
                    <p>记录迎新</p>
                    <img class="camera"src="images/camera.jpg" alt="">
                </div>
                <div class="photo-one">
                    <img class="bar-photos"src="images/睡美人.jpg" alt="">
                    <a href="#">组照 | 睡美人系</a>
                    <p>静静期待睡美人的苏醒</p>
                    <img class="camera"src="images/camera.jpg" alt="">
                </div>

                <div class="photo-one">
                    <img class="bar-photos"src="images/夕阳.jpg" alt="">
                    <a href="#">组照 | 紫色治愈系</a>
                    <p>落霞与孤鹜齐飞</p>
                    <img class="camera"src="images/camera.jpg" alt="">
                </div>
                <div class="photo-one">
                    <img class="bar-photos"src="images/光影.jpg" alt="">
                    <a href="#">组照 | 落日余晖系</a>
                    <p>捕捉夕阳的对称光影瞬间</p>
                    <img class="camera"src="images/camera.jpg" alt="">
                </div>
                

                <div class="diary">
                    <img src="images/LOGO.jpg" alt="">
                    <a class="diary-content"href="#">IWHALEIS的自述</a>
                    <p class="diary-time">SEPTEMBER 29.2020</p>
                </div>

                <div class="diary">
                    <img src="images/张晨晨.jpg" alt="">
                    <a class="diary-content"href="#">镜头下的人物-最美标兵张晨晨的自白</a>
                    <p class="diary-time">SEPTEMBER 1.2019</p>
                </div>

                <div class="diary">
                    <img src="images/申茗.jpg" alt="">
                    <a class="diary-content"href="#">镜头下的人物-东北妹子对于汉服的诠释</a>
                    <p class="diary-time">August 8 .2019</p>
                </div>

                <div class="diary">
                    <img src="images/诺妹.jpg" alt="">
                    <a class="diary-content"href="#">【摄影故事】-在健身中体验摄影乐趣</a>
                    <p class="diary-time">July 15.2019</p>
                </div>

                
                <div class="diary">
                    <img src="images/摄影1.jpg" alt="">
                    <a class="diary-content"href="#">【摄影心得】-不为取悦别人 只为记录生活</a>
                    <p class="diary-time">June 18.2019</p>
                </div>

                <div class="diary">
                    <img src="images/摄影2.jpg" alt="">
                    <a class="diary-content"href="#">【摄影心得】-成长不是一蹴而就的事</a>
                    <p class="diary-time">June 8.2019</p>
                </div>

                <div class="diary">
                    <img src="images/摄影3.jpg" alt="">
                    <a class="diary-content"href="#">【摄影心得】-聚焦生活点滴 发现自然之美</a>
                    <p class="diary-time">May 15.2019</p>
                </div>

                <div class="thought">
                    <p class="topic">拍摄理念</p>
                    <p class="thought-content">无论是摄影小白，还是摄影师，当你拿起相机决定用心拍摄的那一刻，这张照片就被赋予了特殊的意义。"记录生活，留住感动"旨在让我不断寻求生活中被忽视的小确幸和片段瞬间。不去拍，你永远不知道记录的会是什么。带着心情去拍摄，本身就是一种感动。</p>
                </div>
              

            </div>

            <div class="main">
                <div class="main-top">

                    <div class="top-left">
                        <img src="images/小组logo.jpg" alt="">
                        <p class="info">人生惊叹号自己画下，泪水汗水由自己撒下；枪响胜利资格有谁拿下，每口呼吸只为等待离开。组名"FOR YOU"旨在唤醒你打破"煤气灯效应"，让你开始关注自己。整体架构融合摄影师网站简约分明系，模块分层以及分层模块让你达到观赏最佳化。</p>
                    </div>

                    <div class="top-right">
                        <div class="members">
                            <a href="#">"FOR YOU" 组长：张良</a>
                            <a href="#">"FOR YOU" 组员：陈慧</a>
                            <a href="#">"FOR YOU" 组员：丁璐</a>
                            <a href="#">"FOR YOU" 组员：宣辉</a>
                            <a href="#">"FOR YOU" 组员：郭文娟</a>
                            <a href="#">"FOR YOU" 组员：熊长龙</a>
                        </div>
                    </div>

                    <div class="main-content">
                        <img src="images/丁璐.jpg" alt="">
                        <a class="name-one"href="#">【 白 日 梦 想 家 】</a>
                        <span>|</span>
                        <a class="name-two"href="#">【 丁 璐 】</a>
                    </div>

                </div>
                <!--设置Main照片下部分-->
                <div class="member-two">
                    <img src="images/熊长龙.jpg" alt="">
                    <a class="name-one"href="#">【 保 持 纯 真 】</a>
                    <span>|</span>
                    <a class="name-two"href="#">【 熊 长 龙 】</a>
                </div>

                <div class="member-two">
                    <img src="images/宣辉.jpg" alt="">
                    <a class="name-one"href="#">【 行 走 江 湖 】</a>
                    <span>|</span>
                    <a class="name-two"href="#">【 宣 辉 】</a>
                </div>

                <div class="member-two">
                    <img src="images/郭文娟.jpg" alt="">
                    <a class="name-one"href="#">【 Lucky Room 】</a>
                    <span>|</span>
                    <a class="name-two"href="#">【 郭文娟 】</a>
                </div>

                <div class="member-two">
                    <img src="images/陈慧.jpg" alt="">
                    <a class="name-one"href="#">【 Hiphop 精 神 】</a>
                    <span>|</span>
                    <a class="name-two"href="#">【 陈 慧 】</a>
                </div>
            </div>


        </div>

        <div class="links-bottom">
            <a href="#">首页</a>
            <span>|</span>
            <a href="#">关于IW.</a>
            <span>|</span>
            <a href="#">作品合集</a>
            <span>|</span>
            <a href="#">摄影笔记</a>
        </div>
        <div class="declaration">
            <p>本站照片版权属于【IWHALEIS】未经允许不得使用</p>
        </div>

    </div>
</body>
</html>